<template>

  <div>
    <el-card class="box-card" :visible.sync="addDialogVisible">
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <el-breadcrumb-item :to="{ path:'/welcome/conferenceRoom' }">会议管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>会议预订</el-breadcrumb-item>
      </el-breadcrumb>
      <template>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="会议名称">
            <el-input v-model="params.conferenceTitle" placeholder="请输入会议名称"></el-input>
          </el-form-item>
          <el-form-item label="会议室">
            <el-select v-model="params.conferenceName" clearable placeholder="请选择会议室">
              <el-option label="查询全部" value="查询全部"></el-option>
              <el-option v-for="conference in conferenceList" :key="conference.id" :value="conference.conferenceName"
                         :label="conference.conferenceName"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click=" search">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!--审核-->
      <div>
        <el-dialog
          title="审核"
          :close-on-click-modal="false"
          :visible.sync="audit"
          :show-close="true" width="850px">
          <el-form :model="conferenceRoot"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="furniture"
                   :rules="rules"
          >
            <div style="align-content: center">
              <template>
                <el-radio-group v-model="conferenceRoot.meetingStatusId">
                  <el-radio :value="1" :label="1">未回复</el-radio>
                  <el-radio :value="2" :label="2">已回复</el-radio>
                  <el-radio :value="3" :label="3">准备就绪</el-radio>
                  <el-radio :value="4" :label="4">会议签到</el-radio>
                  <el-radio :value="5" :label="5">进行中</el-radio>
                  <el-radio :value="6" :label="6">会议结束</el-radio>
                  <el-radio :value="7" :label="7">归档</el-radio>
                  <el-radio :value="8" :label="8">已取消</el-radio>
                </el-radio-group>
              </template>
            </div>
            <el-form-item>
              <el-button type="primary" @click="updateAudit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!--      添加-->
      <div>
        <el-dialog
          title="安排会议"
          :close-on-click-modal="false"
          :visible.sync="addDialogVisible"
          :show-close="true" width="850px">
          <el-form :model="conferenceRoot"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="conferenceRoot"
                   :rules="rules"
          >
            <div>
              <el-form-item label="会议名称" prop="conferenceTitle">
                <el-input placeholder="请输入会议名称" v-model="conferenceRoot.conferenceTitle" class="size"></el-input>
              </el-form-item>
              <el-form-item label="会议室" prop="conferenceRoomid">
                <el-select v-model="conferenceRoot.conferenceRoomid" placeholder="请选择会议室">
                  <el-option v-for="conference in conferenceList" :key="conference.id" :value="conference.id"
                             :label="conference.conferenceName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="开会时间" prop="meetingTime">
                <el-col :span="11">
                  <el-date-picker v-model="conferenceRoot.meetingTime" type="date" placeholder="选择日期"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="申请人" prop="applicantid">
                <el-input placeholder="请输入申请人" v-model="conferenceRoot.applicantid" class="size"></el-input>
              </el-form-item>
              <el-form-item label="所属部门" prop="departmentid">
                <el-select v-model="conferenceRoot.departmentid" placeholder="请选择所属部门">
                  <el-option v-for="department in departmentList" :key="department.id" :value="department.id"
                             :label="department.departmentName"/>
                </el-select>
              </el-form-item>
              <!--              <el-form-item label="申请时间" prop="timeApplication" required>-->
              <!--                <el-col :span="11">-->
              <!--                  <el-date-picker v-model="conferenceRoot.timeApplication" type="date"-->
              <!--                                  placeholder="选择日期"></el-date-picker>-->
              <!--                </el-col>-->
              <!--              </el-form-item>-->
              <el-form-item label="状态" prop="meetingStatusId" required>
                <el-radio-group v-model="conferenceRoot.meetingStatusId">
                  <el-radio :value="1" :label="1">未回复</el-radio>
                  <el-radio :value="2" :label="2">已回复</el-radio>
                  <el-radio :value="3" :label="3">准备就绪</el-radio>
                  <el-radio :value="4" :label="4">会议签到</el-radio>
                  <el-radio :value="5" :label="5">进行中</el-radio>
                  <el-radio :value="6" :label="6">会议结束</el-radio>
                  <el-radio :value="7" :label="7">归档</el-radio>
                  <el-radio :value="8" :label="8">已取消</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="参与人数" prop="numberParticipants">
                <el-input-number v-model="conferenceRoot.numberParticipants" :step="1"></el-input-number>
              </el-form-item>
              <el-form-item label="会议要求" prop="meetingRequest">
                <el-input type="textarea" v-model="conferenceRoot.meetingRequest" style="width:500px"></el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">立即安排</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!--      修改-->
      <div>
        <el-dialog
          title="修改会议"
          :close-on-click-modal="false"
          :visible.sync="editDialogVisible"
          :show-close="true" width="850px">
          <el-form :model="conferenceRoot"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="conferenceRoot"
                   :rules="rules"
          >
            <div>
              <el-form-item label="会议名称" prop="conferenceTitle">
                <el-input placeholder="请输入会议名称" v-model="conferenceRoot.conferenceTitle" class="size"></el-input>
              </el-form-item>
              <el-form-item label="会议室" prop="conferenceRoomid">
                <el-select v-model="conferenceRoot.conferenceRoomid" placeholder="请选择会议室">
                  <el-option v-for="conference in conferenceList" :key="conference.id" :value="conference.id"
                             :label="conference.conferenceName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="开会时间" prop="meetingTime">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="conferenceRoot.meetingTime"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="申请人" prop="applicantid">
                <el-input placeholder="请输入申请人" v-model="conferenceRoot.applicantid" class="size"></el-input>
              </el-form-item>
              <el-form-item label="所属部门" prop="departmentid">
                <el-select v-model="conferenceRoot.departmentid" placeholder="请选择所属部门">
                  <el-option v-for="department in departmentList" :key="department.id" :value="department.id"
                             :label="department.departmentName"/>
                </el-select>
              </el-form-item>
              <!--              <el-form-item label="申请时间" prop="timeApplication">-->
              <!--                <el-col :span="11">-->
              <!--                  <el-form-item prop="date1">-->
              <!--                    <el-date-picker type="date" placeholder="选择日期" v-model="conferenceRoot.timeApplication"-->
              <!--                    ></el-date-picker>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <!--              </el-form-item>-->
              <el-form-item label="状态" prop="meetingStatusId" required>
                <el-radio-group v-model="conferenceRoot.meetingStatusId">
                  <el-radio :value="1" :label="1">未回复</el-radio>
                  <el-radio :value="2" :label="2">已回复</el-radio>
                  <el-radio :value="3" :label="3">准备就绪</el-radio>
                  <el-radio :value="4" :label="4">会议签到</el-radio>
                  <el-radio :value="5" :label="5">进行中</el-radio>
                  <el-radio :value="6" :label="6">会议结束</el-radio>
                  <el-radio :value="7" :label="7">归档</el-radio>
                  <el-radio :value="8" :label="8">已取消</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="参与人数" prop="numberParticipants">
                <el-input-number v-model="conferenceRoot.numberParticipants" :step="1"></el-input-number>
              </el-form-item>
              <el-form-item label="会议要求" prop="meetingRequest">
                <el-input type="textarea" v-model="conferenceRoot.meetingRequest" style="width:500px"></el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="updateSubmitForm()">修改会议</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div><span style="font-size:14px">状态：</span>
        <el-tag color="black" style="color: honeydew">未回复</el-tag>
        <el-tag color="green" style="color: honeydew">已回复</el-tag>
        <el-tag color="#CA814D" style="color: honeydew">准备就绪</el-tag>
        <el-tag color="#747474" style="color: honeydew">会议签到</el-tag>
        <el-tag color="#00CED1" style="color: honeydew">进行中</el-tag>
        <el-tag color="#8B4500" style="color: honeydew">会议结束</el-tag>
        <el-tag color="#0000FF" style="color: honeydew">归档</el-tag>
        <el-tag color="red" style="color: honeydew">已取消</el-tag>
        <el-button style="float: right" type="primary" @click="search(1)" icon="el-icon-message"
                   circle></el-button>
      </div>
      <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="odd" label="单号"></el-table-column>
        <el-table-column prop='conferenceTitle' label="会议名称">
        </el-table-column>
        <el-table-column prop="conference.conferenceName" label="会议室"></el-table-column>
        <el-table-column prop="meetingTime" label="开会时间">
          <template slot-scope="scope">
            <span>{{scope.row.meetingTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applicantid" label="申请人"></el-table-column>
        <el-table-column prop="department.departmentName" label="归属部门"></el-table-column>
        <el-table-column prop="timeApplication" label="申请时间"></el-table-column>
        <!--        <el-table-column v-if="meetingStatusId==1" prop="meetingStatusId" label="会议状态" >未回复</el-table-column>-->
        <el-table-column prop="meetingStatusId" label="会议状态">
          <template slot-scope="scope">
            <span v-if="scope.row.meetingStatusId === 1" style="color: black">未回复</span>
            <span v-if="scope.row.meetingStatusId === 2" style="color:green">已回复</span>
            <span v-if="scope.row.meetingStatusId === 3" style="color:#CA814D">准备就绪</span>
            <span v-if="scope.row.meetingStatusId === 4" style="color:#747474">会议签到</span>
            <span v-if="scope.row.meetingStatusId === 5" style="color:#00CED1">进行中</span>
            <span v-if="scope.row.meetingStatusId ===6" style="color:#8B4500"> 会议结束</span>
            <span v-if="scope.row.meetingStatusId ===7" style="color:#0000FF">归档</span>
            <span v-if="scope.row.meetingStatusId ===8" style="color:red">已取消</span>
            <!--            //这里使用===还是==得看返回值是什么类型的，需不需要转换啥的，自己尝试一下就可以了，这样直接写也是行的，不过推荐最好使用===-->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover">
              <el-button type="info" plain>查看会议</el-button>
              <el-button type="info" plain @click="showAddDialog">会议安排</el-button>
              <!--            <router-link to="/welcome/conferenceRoom/addConferenceRoom">会议安排</router-link>-->
              <el-button type="info" plain @click="showUpdateDialog(scope.row)">修改会议</el-button>
              <el-button type="info" plain @click="cancellation(scope.row)">取消会议</el-button>
              <el-button v-if=" scope.row.meetingStatusId==null" type="info" plain @click="auditUpdate(scope.row)">
                审核
              </el-button>
              <el-button slot="reference">管理</el-button>
            </el-popover>
          </template>
        </el-table-column>

      </el-table>
      <template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="params.total"
        >
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>
<script>

  export default {
    'data' () {
      return {
        tableData: [],//列表信息
        conferenceList: [],//会议室信息
        departmentList: [],//所属部门信息
        params: {
          pageSize: 5, // 每页显示5条记录
          pageIndex: 1, // 当前第几页
          total: 0, // 共几条记录去分页
          conferenceTitle: '',//通过会议名称查询
          conferenceName: '',//通过会议室查询
        },
        conferenceRoot: {
          odd: 0,
          conferenceTitle: '',//会议名称
          conferenceRoomid: '',//会议室id
          meetingTime: '',//开会时间
          applicantid: '',//  申请人ID
          departmentid: '',//所属部门Id
          timeApplication: '',//申请时间
          meetingStatusId: 1,//会议状态//单选按钮 默认为第一个 未回复
          numberParticipants: 10,//参加会议人数默认10
          meetingRequest: '',//会议要求
          typeId: 1,//会议类型Id
        },
        addDialogVisible: false,
        audit: false,
        editDialogVisible: false,
        formLabelWidth: '120px',
        rules: {
          conferenceTitle: [
            {
              required: true,
              message: '请输入会议名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          conferenceRoomid: [{
            required: true,
            message: '请选择会议室',
            trigger: 'change',
          }],
          timeApplication: [{
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'blur'

          }],
          meetingTime: [{
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'blur'

          }],
          applicantid: [{
            required: true,
            message: '请输入申请人',
            trigger: 'blur'
          },
            {
              min: 2,
              max: 4,
              message: '长度在 3 到 4 个字符',
              trigger: 'blur'
            }],
          departmentid: [{
            required: true,
            message: '请选择所属部门',
            trigger: 'change'

          }]

        }
      }
    },
    // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    'mounted' () {
      this.search()
    },
    methods: {
      'handleSizeChange' (val) {
        console.log(`每页 ${val} 条`)
        this.params.pageSize = val
        this.search()
      },
      'handleCurrentChange' (val) {
        console.log(`当前页: ${val}`)
        this.params.pageIndex = val
        this.search()
      },
      async 'search' (count) {
        const url = '/vueboot/conferenceRoot/list'
        const { data: res } = await this.$ajax.get(url, {
          params: {
            pageIndex: this.params.pageIndex,
            limit: this.params.pageSize,
            conferenceTitle: this.params.conferenceTitle,
            conferenceName: this.params.conferenceName,
            meetingStatusId: count,
          },
          headers: {
            token: localStorage.getItem('token')
          }
        })
        console.log(res.page.records[0].meetingTime)
        this.tableData = res.page.records
        this.params.total = res.page.total
        this.departmentList = res.departmentList
        this.conferenceList = res.conferenceList
        console.log(res.conferenceList)
      },
      'showAddDialog' () {
        this.resetForm()
        this.addDialogVisible = true
      },
      async 'submitForm' () {
        //日期格式装换
        let myTime1 = this.conferenceRoot.meetingTime
        let meetingTime = this.filterTime(myTime1)
        let myTime2 = this.conferenceRoot.meetingTime
        let timeApplication = this.filterTime(myTime2)
        this.conferenceRoot.meetingTime = meetingTime
        this.conferenceRoot.timeApplication = timeApplication
        const url = '/vueboot/conferenceRoot/seva'
        const { data: res } = await this.$ajax.post(url, this.conferenceRoot)
        if (res == '1') {
          this.addDialogVisible = false
          this.conferenceRoot = {
            conferenceTitle: '',//会议名称
            conferenceRoomid: '',//会议室id
            meetingTime: '',//开会时间
            applicantid: '',//  申请人ID
            departmentid: '',//所属部门Id
            timeApplication: '',//申请时间
            meetingStatusId: 1,//会议状态//单选按钮 默认为第一个 未回复
            numberParticipants: 10,//参加会议人数默认10
            meetingRequest: '',//会议要求
            typeId: 1,//会议类型Id
          }
          this.search()
          this.$message({
            message: '安排成功',
            type: 'success'
          })
        } else {
          this.$message.error = '添加失败'
        }
      },
      resetForm () {
        if (this.$refs['conferenceRoot'] !== undefined) {
          this.$refs['conferenceRoot'].resetFields()
        }
      },
      'filterTime' (time) {
        var date = new Date(time)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = date.getDate()
        d = d < 10 ? '0' + d : d
        var h = date.getHours()
        h = h < 10 ? '0' + h : h
        var minute = date.getMinutes()
        minute = minute < 10 ? '0' + minute : minute
        var s = date.getSeconds()
        s = s < 10 ? '0' + s : s
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
      },
      'showUpdateDialog' (row) {
        this.$set(this.conferenceRoot, 'meetingTime', row.meetingTime)
        this.editDialogVisible = true
        this.conferenceRoot.odd = row.odd
        this.conferenceRoot.conferenceTitle = row.conferenceTitle
        this.conferenceRoot.conferenceRoomid = row.conferenceRoomid
        this.conferenceRoot.applicantid = row.applicantid//  申请人ID
        this.conferenceRoot.departmentid = row.departmentid//所属部门Id
        this.conferenceRoot.timeApplication = row.timeApplication//申请时间
        this.conferenceRoot.meetingStatusId = row.meetingStatusId//会议状态//单选按钮 默认为第一个 未回复
        this.conferenceRoot.numberParticipants = row.numberParticipants//参加会议人数默认10
        this.conferenceRoot.meetingRequest = row.meetingRequest//会议要求
      },
      async 'updateSubmitForm' () {
        const url = '/vueboot/conferenceRoot/seva'
        const { data: res } = await this.$ajax.post(url, this.conferenceRoot)
        if (res == '1') {
          this.editDialogVisible = false
          this.conferenceRoot = {
            conferenceTitle: '',//会议名称
            conferenceRoomid: '',//会议室id
            meetingTime: '',//开会时间
            applicantid: '',//  申请人ID
            departmentid: '',//所属部门Id
            timeApplication: '',//申请时间
            meetingStatusId: 1,//会议状态//单选按钮 默认为第一个 未回复
            numberParticipants: 10,//参加会议人数默认10
            meetingRequest: '',//会议要求
            typeId: 1,//会议类型Id
          }
          this.search()
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message.error = '修改失败'
        }
      },
      async 'cancellation' (row) {
        this.$confirm('确定取消会议吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const url = '/vueboot/conferenceRoot/delConferenceRoot'
          this.$ajax.get(url, {
            params: {
              odd: row.odd,
              isDele: 1
            }
          }).then(res => {
            if (res.data == '1') {
              this.search()
              this.$message({
                type: 'success',
                message: '取消成功'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      auditUpdate (row) {
        this.conferenceRoot.odd = row.odd//办公家具申领id
        this.audit = true
      },
      async updateAudit () {
        const url = '/vueboot/conferenceRoot/audit'
        this.$ajax.get(url, {
          params: {
            meetingStatusId: this.conferenceRoot.meetingStatusId,
            odd: this.conferenceRoot.odd
          }
        }).then(res => {
          if (res.data == '1') {
            this.search()
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.audit = false
          } else {
            this.$message.error = '审核失败'
            this.search()
            this.$message({
              type: 'error',
              message: '审核失败'
            })
            this.audit = false
          }
        })
      }
    }
  }
</script>
<style>
  .size {
    width: 222px;
  }

  #add {
    position: relative;
    right: 0px;
  }

</style>
